// import { useTranslation } from 'react-i18next';
// import { useChangeTheme } from '@/hooks';
// import { lsGetItem } from '@/utils';

const menus = [
  {
    title: '─',
    id: 1,
    className: 'hover:bg-primary-bg text-primary-t',
  },
  {
    title: 'ㅁ',
    id: 2,
    className: 'hover:bg-primary-bg text-primary-t',
  },
  {
    title: '×',
    id: 3,
    className: 'hover:bg-red hover:text-white text-asserts',
  },
];

function Header() {
  const handleClick = (id) => {
    if (id === 1 && typeof window.desktop.minWindow === 'function') {
      window.desktop.minWindow();
    } else if (id === 2 && typeof window.desktop.maxWindow === 'function') {
      window.desktop.maxWindow();
    } else if (id === 3 && typeof window.desktop.closeWindow === 'function') {
      window.desktop.closeWindow();
    }
  };

  return (
    <ul className='flex items-center bg-transparent justify-end absolute right-0 top-0'>
      {menus.map((it) => (
        <li className={`flex items-center justify-center text-lg w-8 h-6 cursor-pointer ${it.className}`} key={it.id} onClick={() => handleClick(it.id)}>
          {it.title}
        </li>
      ))}
    </ul>
  );
}

export default Header;
